<div id="app-loading-screen">
  <style>
    #app-loading-screen {
      z-index: 999;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s;
      background: white;
    }

    #app-loading-screen .app-loading-screen__status {
      font-weight: 500;
      color: #244357;
      transition: opacity 5s;
    }

    #app-loading-screen .app-loading-screen__logo-spinner {
      transform-origin: center;
      -webkit-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    :not(:empty) + #app-loading-screen.app-loading-screen--fade-out {
      opacity: 0;
    }

    :not(:empty) + #app-loading-screen.app-loading-screen--hidden {
      display: none;
    }

    @-moz-keyframes spin {
      100% {
        -moz-transform: rotate(360deg);
      }
    }

    @-webkit-keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  </style>
  <svg xmlns="http://www.w3.org/2000/svg" width="197" height="197" fill="none" viewBox="0 0 197 197">
    <path
      fill="#244357"
      fill-rule="evenodd"
      d="M131.718 94.87c0-16.77-14.844-31.37-31.541-31.37-12.3 0-23.27 7.468-27.992 18.057-.085-.002-.082-.003-.082-.003h-.083c-12.964 0-23.52 11.681-23.52 24.704 0 9.268 3.844 16.482 11.59 20.335v-.001c8.353 4.904 14.445-11.424 16.3-16.394.253-.679.427-1.146.517-1.318l.063.135c.622 1.352 1.773 3.849 7.32 3.964 0 0-6.732-3.314-3.727-12.108 3.004-8.795 7.445-16.259 13.543-19.71 6.098-3.45 12.259-3.216 17.927-.786 0 0-8.553-7.898-18.382-1.929-5.646 3.43-9.405 7.236-11.993 11.136-1.6.287-3.455.171-4.747.09-.46-.028-.85-.052-1.131-.052-1.352 0-3.439.92-2.496 4.255.408 1.44 1.132 2.889 1.796 4.217.84 1.68 1.585 3.169 1.469 4.206-.232 1.306-.333 2.482-.297 3.519-.121.193-.324.592-.602 1.138-2.3 4.515-9.738 19.115-18.74 11.338.134.119.267.269.398.446-6.944-6.717-5.559-20.578-.4-25.422 8.716-8.182 18.414-6.105 18.414-6.105l1.204-2.7c.146-.328.303-.7.475-1.11 2.197-5.221 6.913-16.434 24.024-16.22 19.515.245 24.829 20.966 24.836 27.875l-.001.084-.011 4.881 4.842-.423c.383-.033.764-.05 1.131-.05 7.088 0 14.325 5.538 14.325 12.657s-7.237 10.828-14.325 10.828h-10.553c-7.571-1.029-5.436-4.752-3.506-8.115.18-.313.358-.624.526-.929 2.368-4.289 3.177-7.02 3.687-10.959.306-2.368.081-4.141.016-4.568-.01-.065-.017-.1-.017-.1s-.008.133-.033.359l.033-.587s-1.494 6.033-4.441 8.197c-.686.504-1.124.838-1.406 1.063.297-1.125 1.41-5.866-.181-8.463 0 0-.66 10.908-6.45 11.488-5.791.579-13.952-5.372-16.285-7.762.104.497.22.963.342 1.414l-.115-.131s.097.225.246.61c.207.712.436 1.362.68 1.964.812 2.617 1.677 6.633.387 9.151-.17.331-.688.795-1.314 1.354-2.66 2.376-7.252 6.479 4.782 9.494 1.255.41 2.676.737 4.251.891h.006c.628.061 1.282.095 1.959.095h27.386c9.555 0 17.3-5.444 17.3-15.04 0-9.597-7.849-17.59-17.404-17.59zm-12.824-9.6c-1.825-.686-6.514-.223-9.809 1.07-1.616.633-2.898 1.465-3.339 2.46-1.209 2.732 6.197 7.476 9.181 6.602 1.422-.415 3.464-3.455 4.375-6.115.647-1.892.722-3.59-.408-4.016zm-16.56 2.251c-.845-.108-2.593-.346-3.152-.981-1.248-1.42-3.249-1.8-4.704-1.48-1.54.34-2.362 2.143-1.302 4.384.475 1.007.354 2.222-.13 3.129 1.515-1.419 2.931-2.574 3.983-3.129 2.071-1.095 3.908-1.662 5.306-1.923h-.001zm15.125 20.777s-1.512 5.162-2.57 7.513c-.815 1.814-1.143 1.915-1.664 2.074-.074.023-.153.047-.237.077.223-.567.392-1.291.657-2.43l.002-.012.109-.467c.4-1.713 0-2.164 0-2.164-.524 2.563-1.338 4.394-2.031 5.595-.897.302-2.002.496-2.805.174-1.133-.455-1.326-5.807-1.326-6.11 4.932.341 7.56-1.67 9.864-4.25h.001z"
      clip-rule="evenodd"
    />
    <path
      class="app-loading-screen__logo-spinner"
      fill="url(#paint0_radial)"
      fill-rule="evenodd"
      d="M9 98.5C9 49.07 49.07 9 98.5 9c2.485 0 4.5-2.015 4.5-4.5S100.985 0 98.5 0C44.1 0 0 44.1 0 98.5S44.1 197 98.5 197c31.593 0 59.711-14.873 77.736-38h-11.781c-16.36 17.826-39.853 29-65.955 29C49.07 188 9 147.929 9 98.5z"
      clip-rule="evenodd"
    />
    <defs>
      <radialGradient
        id="paint0_radial"
        cx="0"
        cy="0"
        r="1"
        gradientTransform="matrix(103.50022 93.00019 -248.60248 276.67053 98 0)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".002" stop-color="#244357" />
        <stop offset="1" stop-color="#244357" stop-opacity="0" />
      </radialGradient>
    </defs>
  </svg>
  <div class="app-loading-screen__status app-loading-screen__status_message">Loading...</div>
  <div class="app-loading-screen__status app-loading-screen__status_percent"></div>
</div>
